<template>
  <div :class="['screen-title', floatState ? 'absolute-div' : '']">
    <div class="title-icon">
      <img :src="titleIcon" alt="图标" />
    </div>
    <div class="title">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'screen-title'
})
export default class ScreenTitle extends Vue {
  @Prop({ default: false }) private floatState!: boolean // 是否悬浮 不在文档流之内 默认不悬浮
  private titleIcon: string = require('assets/images/title-icon.png')
}
</script>

<style lang="scss" scoped>
.screen-title {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  &.absolute-div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .title-icon {
    width: 46px;
    height: 34px;
    margin-left: 18px;
  }
  .title {
    font-size: 22px;
    font-family: 'PingFang Regular';
    font-weight: 800;
    color: #ffffff;
    margin-left: 12px;
    width: calc(100% - 18px - 46px - 12px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
  }
}
</style>
